<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>购物车</title>
	<link rel="stylesheet" type="text/css" href="../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
	<link rel="stylesheet" type="text/css" href="../css/app.css" />
	<style type="text/css">
		/*购物车 重写 for Li */

		body {
			background-color: #F0F1F2;
		}

		.cart_item_list {
			padding: 0.5rem;
			position: relative;
		}

		.cart_item_list .mid_main_img {
			/*height: 4.3rem;*/
			border-radius: 0.2rem;
			margin-right: 0.6rem;
			flex-shrink: 0;
		}

		.cart_item_list .mid_main_img img {
			width: 5rem;
			height: 5rem;
			border-radius: 0.2rem;
			flex-shrink: 0;
		}

		.left_check_ico {
			align-self: center;
			flex-shrink: 0;
		}

		.left_check_ico img {
			width: 0.95rem;
			height: 0.95rem;
			margin-right: 0.55rem;
			flex-shrink: 0;
		}

		.right_cont {
			height: 4.5rem;
		}

		.right_cont_title {
			/*width: 10.95rem;*/
			height: 2rem;
			display: -webkit-box;
			display: box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical;
			font-size: 0.7rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
			margin-bottom: .1rem;
			line-height: 1.1rem;
		}

		.mid_check_count {
			height: 0.9rem;
			background: rgba(246, 246, 246, 1);
			padding-left: 0.25rem;
			padding-right: 0.25rem;
			font-size: 0.55rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			border-radius: 0.1rem;
			display: inline-block;
			margin-bottom: 0.55rem;
			padding-top: 0.01rem;
			box-sizing: border-box;
			background: #E3F4FF
		}

		.more_check_icon {
			width: 0.6rem;
			height: 0.6rem;
			display: inline-block;
			transform: translateY(0.15rem);
			/* margin-top:-0.1rem */
		}

		.more_check_icon img {
			width: 0.6rem;
			height: 0.6rem;
		}

		.price_count_wraper {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.add_decrease_count {
			width: 3.85rem;
			height: 1.1rem;
			border-radius: 0.07rem;
			border-top: 0;
			display: flex;
			justify-content: space-between;
			transform: translateY(0.03rem);
		}

		.add_decrease_count>div {
			width: 1.15rem;
			height: 1.1rem;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.add_decrease_count>div img {
			width: 0.4rem;
			height: 0.4rem;
		}

		.footer_buy {
			width: 100%;
			height: 2.45rem;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(238, 238, 238, 0.5);
			border-bottom: none;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			padding-left: 0.65rem;
			box-sizing: border-box;
		}

		.footer_buy>div {
			display: flex;
		}

		.check_footer_ico {
			display: flex;
			align-items: center;
			font-size: 0.75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}

		.check_footer_ico img {
			width: 0.9rem;
			height: 0.9rem;
		}

		.check_footer_ico span {
			font-size: 0.75rem;
			margin-left: 0.4rem
		}

		.buy_btn .buy {
			width: 5.55rem;
			height: 1.8rem;
			background: rgba(247, 48, 36, 1);
			font-size: 0.8rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 1.8rem;
			text-align: center;
			border-radius: 2.5rem;
			margin-right: 0.65rem;
			margin-top: 0.3rem;
			border: rgba(247, 48, 36, 1);
		}

		.buy_btn .delete {
			width: 5.55rem;
			height: 1.8rem;
			background: rgba(247, 48, 36, 0.15);
			font-size: 0.8rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 1.8rem;
			text-align: center;
			border-radius: 2.5rem;
			margin-right: 0.65rem;
			margin-top: 0.3rem;
			border: 0.05rem solid rgba(247, 48, 36, 0.4);
			color: rgba(247, 48, 36, 1);
		}

		.price_all {
			display: flex;
			flex-direction: row;
			align-items: space-between;
			/*margin-right: 4rem;*/
			text-align: left;
			justify-content: center;
			/*float: left;*/
		}

		.aui-bar-nav {
			background-color: #005A93;
			color: #fff;
		}

		.aui-bar-nav .aui-btn {
			padding-right: 0;
			padding-left: 0.75rem;
		}

		.aui-bar-nav .aui-pull-left {
			height: 1.7rem;
			line-height: 1.7rem;
			background-color: #F5F5F5;
			border-radius: 0.25rem;
			margin-top: 0.275rem;
			width: calc(100vw - 3.25rem);
			width: -webkit-calc(100vw - 3.25rem);
		}

		.sum-box {
			background: #F5F5F5;
		}

		.sum-box .del {
			width: 1.64rem;
			border-right: 0.14rem solid #fff;
		}

		.sum-box .del .ico {
			width: 2.04rem;
			height: 1.44rem;
			margin-top: 0 !important;
		}

		.sum-box .text {
			width: 1.8rem;
			height: 1.64rem;
			padding: 0;
			text-align: center;
			line-height: 1.64rem;
		}

		.sum-box .text input {
			height: 1.44rem;
			padding: 0;
			text-align: center;
			width: 100%;
		}

		.sum-box .add {
			width: 1.64rem;
			border-left: 0.14rem solid #fff;
		}

		.sum-box .add .ico {
			width: 2.04rem;
			height: 1.44rem;
			margin-top: 0 !important;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<div style="position:fixed;top:0;right:0;z-index:9999;width:100%">
			<header class="aui-bar aui-bar-nav">
				<div class="aui-title" style="font-size:.9rem;color:#fff;">
					<span style="color:#fff !important">购物车({{cart_number}})</span>
				</div>
				<a v-if="cart_number>0" class="aui-pull-right" style="font-size:.75rem;color: #fff;font-weight:400;font-family:PingFangSC-Regular;margin-right:.2rem;" taomode onclick="tapcart_btn()">
					<span v-if="!cart_bianji">编辑</span>
					<span v-if="cart_bianji">完成</span>
				</a>
			</header>
		</div>
		<div class="wrapper" style="width:100%;padding:0 2.25%;margin-top:2.8rem;">
			<div class="cart_detail">
				<!-- 购物车列表每项 -->
				<div class="item_wraper"  v-if="cart_number>0">
					<div class="cart_item_list" v-for="(vo,index) in info" style="display:flex;margin-top:0.5rem;background-color:#fff;border-radius:0.4rem;">
						<div class="left_check_ico" tapmode @click="checkGoodCart(index,vo.is_check,vo.id,vo.status)">
							<img v-if="vo.is_check=='0'" src="../image/icon/icon-noselect-red.png" />
							<img v-else src="../image/icon/select_new.png" />
						</div>
						<div class="mid_main_img" style="position:relative;">
							<img :src="vo.cover" alt="">
							<!-- 暂时缺少 是否下架的判断 -->
							<div v-if="vo.status=='0'" class="new_mask" style="text-align: center;font-size: 0.6rem;color: #FFFFFF;position: absolute;width: 100%;height:100%;line-height: 5rem;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.4);border-radius:0.25rem;">
								商品已下架
							</div>
						</div>
						<div class="right_cont" style="display: flex;flex-direction: column;justify-content: space-between;">
							<div>
								<div class="right_cont_title">
									{{vo.title}}
								</div>
								<div class="mid_check_count" tapmode @click="showAttr(vo)" v-if="vo.good_sku">
									<div v-html="vo.good_sku" style="margin-right:0.15rem;display:inline-block;color:#005A93;"></div>
									<div class="more_check_icon">
										<img src="../image/icon/icon-down2.png" alt="">
									</div>
								</div>
							</div>
							<!-- 价格 -->
							<div class="price_count_wraper" style="background:#fff;margin-top:-0.1rem">
								<div style="width:4.5rem;">
									<span style="font-size:0.9rem;font-family:Akrobat-Bold;font-weight:bold;color:#E90000;"><span style="font-size:0.6rem;color:#E90000;">￥</span>{{price_format('yuan',vo.current_price)}}.{{price_format('fen',vo.current_price)}}</span>
								</div>

								<!-- 点击增加或减少数量 -->
								<div class="sum-box flex-box-x" style="flex:1;">
									<div class="del flex-xy-center" tapmode @click="if(vo.status=='0')return;if(vo.good_num<2)return;vo.good_num-=1;editGoodCart(vo)">
										<!-- <img style="width:.8rem;height:.8rem;" src="../image/icon/icon-cut-none.png" alt="" v-if="vo.good_num == 1"> -->
										<img class="ico" src="../image/ico/ico_number_del.png" alt="">
									</div>
									<div class="text col-xs-x">{{vo.good_num}}</div>
									<div class="add flex-xy-center" tapmode @click="if(vo.status=='0')return;if(vo.good_num>=vo.stock_num){vo.good_num=vo.stock_num;toast('抱歉，库存已不足');return;};vo.good_num+=1;editGoodCart(vo)">
										<img class="ico" src="../image/ico/ico_number_add.png" alt="">
										<!-- <img style="width:.8rem;height:.8rem;" src="../image/icon/icon-plus-none.png" alt="" v-if="vo.good_num >= vo.stock_num"> -->
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 底部立即购买 -->
				<div v-if="cart_number > 0 " style="margin-top:4rem;">
					<div class="footer_buy">
						<!--  -->
						<div tapmode @click="selectAll" style="float: left;margin-right:0rem">
							<div class="check_footer_ico">
								<img v-if="!all_select" src="../image/icon/icon-noselect-red.png" />
								<img v-if="all_select" src="../image/icon/select_new.png" />
								<span style="margin-top:0.15rem">全选</span>
							</div>
						</div>
						<!--  -->
						<div class="price_all" v-if="!is_bianji">
							<span style="font-size:0.75rem;font-family:Akrobat-Bold;font-weight:bold;margin-top:0.7rem">合计:</span><span style="font-size:0.65rem;color:#e90000;float:left;margin-top:0.5rem">￥<span style="font-size:1.0rem;">{{price_format('yuan',total)}}.{{price_format('fen',total)}}</span></span>
						</div>
						<div>
							<!--  -->
							<div class="buy_btn">
								<div class="buy" v-if="!is_bianji" tapmode @click="createGoodCart">
									立即购买({{good_cart_ids.length}})
								</div>
								<div tapmode @click="delGoodCart" class="delete" v-if="is_bianji">
									删除
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 缺省页面 -->
		<div v-if="cart_number == 0" class="aui-text-center" style="margin-top: 4rem;" tapmode onclick="openWin_goods_list_type('all')">
			<img src="../image/bg/bg-nonecar.png" style="width:7.55rem;height:5rem;margin-left:50%;transform:translateX(-50%);" />
			<div style="font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;color:#B3B3B3;margin-top:1rem;">
				购物车为空
			</div>
			<div class="aui-text-center" tapmode onclick="openWin_goods_list_type('all')">
				<div class="aui-btn" style="display:inline-block;margin-top: 1.5rem;width:10rem;border-radius:0.3rem;height:2.3rem;line-height:2.3rem;text-align:center;background:#005A93;color:#fff;font-size:.8rem;font-family:PingFangSC-Regular;font-weight:400;">
					去逛逛
				</div>
			</div>
		</div>

	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-dialog.js"></script>

<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/fastclick.js"></script>
<script>
	var Tiout;
	var vm = new Vue({
		el: "#app",
		data: {
			all_select: false,
			is_bianji: false,
			info: [],
			good_cart_ids: [],
			temp_number: [],
			cart_number: 0,
			cart_count: 0,
			stock_num: 0,
			localcity: {
				"id": 2608,
				"parentid": 235,
				"categoryname": "平邑县",
				"spell": "pingyixian",
				"first_letter": "P"
			},
			cart_bianji: false
		},
		methods: {
			get_list: function() {
				get_data('api/GoodCart/goodCartList', {
					token: $api.getStorage('token'),
					region_name: vm.localcity.categoryname
				}, function(ret) {
					// console.log(JSON.stringify(ret,null,2))
					if (ret.status) {
						vm.info = ret.data;
						vm.cart_number = vm.info.length
						send_event('cart_number', {
								count: vm.info.length
							})
							// alert(JSON.stringify(ret))
						vm.good_cart_ids = [];
						var cart_count = 0;
						vm.info.forEach(function(el, index) {
							if (el.is_check == '1' && el.status != 0) {
								vm.good_cart_ids.push(el.id)
							}
							if (el.status == 0) {
								vm.info[index].is_check = 0;
								vm.info[index].good_num = 0;
							}
							if (el.status != 0) {
								cart_count++
							}
						})
						vm.cart_count = cart_count
						if (vm.good_cart_ids.length == vm.cart_count) {
							vm.all_select = true
						}
					}
				}, false)
			},
			checkGoodCart: function(index, status, id, status2) {
				//			index 索引  status 选中状态 status2 上下架状态
				//					console.log(status+'/'+status2+'/'+vm.is_bianji)
				//如果商品已下架,不能选中
				if (status2 == '0' && !vm.is_bianji) {
					if (status == '1') {
						this.info[index].is_check = 0;
						this.good_cart_ids.forEach(function(el, index) {
							if (el == id) {
								vm.good_cart_ids.splice(index, 1)
							}
						})
					}
					return;
				}
				if (status == '0') {
					console.log(vm.good_cart_ids.length + '/' + vm.cart_count)
						//改为选中状态
					this.info[index].is_check = 1;
					this.good_cart_ids.push(id)
					if (vm.good_cart_ids.length == vm.cart_count && !vm.is_bianji) {
						this.all_select = true
					} else if (vm.good_cart_ids.length == vm.info.length && vm.is_bianji) {
						this.all_select = true
					}
				} else {
					this.info[index].is_check = 0;
					this.all_select = false;
					this.good_cart_ids.forEach(function(el, index) {
						if (el == id) {
							vm.good_cart_ids.splice(index, 1)
						}
					})
				}
				get_data('api/GoodCart/checkGoodCart', {
					token: $api.getStorage('token'),
					good_cart_id: this.good_cart_ids.join(',')
				}, function(ret) {}, false)
			},
			delGoodCart: function() {
				// dialog.alert({
				// 	title: "提示",
				// 	msg: '是否从购物车中清除该商品？',
				// 	buttons: ['取消', '确定']
				// }, function(ret) {
				// 	if (ret) {
				// 		if (ret.buttonIndex == '2') {
				// 			get_data('api/GoodCart/delGoodCart', {
				// 				token: $api.getStorage('token'),
				// 				good_cart_id: vm.good_cart_ids.join(',')
				// 			}, function(ret) {
				// 				if (ret.status) {
				// 					toast('删除成功')
				// 					vm.get_list()
				// 				}
				// 			}, false)
				// 		}
				// 	}
				// })
				var dialogBox = api.require('dialogBox');
				dialogBox.alert({
					texts: {
						title: '提示',
						content: '是否从购物车中清除该商品',
						leftBtnTitle: '取消',
						rightBtnTitle: '确认'
					},
					styles: {
						bg: '#fff',
						w: 295,
						corner: 10,
						title: {
							marginT: 20,
							titleSize: 17,
							titleColor: '#444444'
						},
						content: {
							marginT: 18,
							marginB: 30,
							color: '#444444',
							size: 17
						},
						left: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							// bg: 'widget://image/ico/ico_btn_left_bg.png',
							bg: "#fff",
							color: '#999999',
							size: 16
						},
						right: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							bg: '#fff',
							color: '#005A93',
							size: 16
						},
						horizontalLine: {
							color: '#EEEEEE',
							height: 1
						},
						verticalLine: {
							color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
							width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
						}
					}
				}, function(ret) {
					if (ret.eventType == 'left') {
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					} else if (ret.eventType == 'right') {
						get_data('api/GoodCart/delGoodCart', {
							token: $api.getStorage('token'),
							good_cart_id: vm.good_cart_ids.join(',')
						}, function(ret) {
							if (ret.status) {
								toast('删除成功')
								vm.get_list()
							}
						}, false)
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					}
				});
			},
			selectAll: function() {
				//					全选操作
				if (this.all_select) {
					this.good_cart_ids = [];
					this.info.forEach(function(el, index) {
						vm.info[index].is_check = 0
					})
				} else {
					this.good_cart_ids = [];
					this.info.forEach(function(el, index) {
						if (vm.is_bianji) {
							vm.info[index].is_check = 1
							vm.good_cart_ids.push(el.id)
						} else {
							if (el.status != 0) {
								vm.info[index].is_check = 1
								vm.good_cart_ids.push(el.id)
							}
						}
					})
				}
				this.all_select = !this.all_select;
				get_data('api/GoodCart/checkGoodCart', {
					token: $api.getStorage('token'),
					good_cart_id: this.good_cart_ids.join(',')
				}, function(ret) {}, false)
			},
			price_format: function(type, price) {
				var price = price / 100;
				var status = (price + '').indexOf('.')
				if (status == '-1') {
					if (type == 'yuan') {
						return price;
					}
					if (type == 'fen') {
						return '00';
					}
				}
				var price_array = (price + '').split('.')
				if (type == 'yuan') {
					return price_array[0];
				}
				if (type == 'fen') {
					var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
					return price_fen;
				}
			},
			createGoodCart: function() {
				if (vm.good_cart_ids.length < 1) {
					return;
				}
				var data = [];
				vm.info.forEach(function(el) {
					if (el.is_check == '1') {
						var temp = {
							good_id: el.good_id,
							cover: el.cover,
							title: el.title,
							cost_price: el.current_price / 100,
							good_sku: el.good_sku,
							good_num: el.good_num,
							peisong_type_id:el.peisong_type_id,
							peisong_type_name:el.peisong_type_name,
						}
						data.push(temp)
					}
				})
				$api.setStorage('goods_info', {
					info: data
				})
				var flag = 1
				$api.setStorage('flag', flag)
				openWin_create_order()
			}
		},
		computed: {
			total: function() {
				var price = 0;
				this.info.forEach(function(el) {
					if (el.is_check == '1') {
						price += el.current_price * el.good_num
					}
				})
				return price;
			}
		}
	})
	var dialog = new auiDialog();
	apiready = function() {

		api.parseTapmode();

		// var header = $api.byId('header');
		// $api.fixStatusBar(header);

		var temp_localcity = api.getPrefs({
			sync: true,
			key: 'localcity'
		});

		if (temp_localcity) {
			vm.localcity = JSON.parse(temp_localcity);
		}

		api.addEventListener({
			name: 'jobRefresh'
		}, function(ret, err) {
			localcity(function(ret) {
				if (ret) {
					vm.localcity = ret;
					vm.get_list()
				}
			})
		});


		vm.get_list()
		add_event('cart_bianji', function(ret) {
			vm.is_bianji = ret.status;
			//				如果是编辑状态
			if (vm.is_bianji && vm.good_cart_ids.length < vm.info.length) {
				vm.all_select = false
			}
			//				如果不是编辑状态
			if (!vm.is_bianji) {
				//					重新计算
				vm.good_cart_ids = [];
				vm.info.forEach(function(el, index) {
					if (el.is_check == '1' && el.status != 0) {
						vm.good_cart_ids.push(el.id)
					}
					if (el.status == 0) {
						vm.info[index].is_check = 0;
					}
				})
				if (vm.good_cart_ids.length == vm.cart_count) {
					vm.all_select = true
				}
			}
		})
		add_event('cart_ref', function(ret) {
			vm.get_list()
		})
		add_event('return_cart', function(ret) {
			vm.get_list()

			//vm.init()
			// openTocart();

		})
	};

	function tapcart_btn() {
		vm.cart_bianji = !vm.cart_bianji
		send_event('cart_bianji', {
			status: vm.cart_bianji
		})
	}

	function editGoodCart(el) {
		// clearTimeout(Tiout); //假如一秒钟之内有同样的操作，去除延时更新数据的操作
		if (el.good_num == '0') {
			return;
		}
		var data = vm.temp_number;
		// alert(JSON.stringify(vm.temp_number))
		var is_have = false;
		data.forEach(function(vo, index) {
			if (vo.id == el.id) {
				vm.temp_number[index] = vo;
				is_have = true;
			}
		})
		if (!is_have) {
			vm.temp_number.push(el)
		}
		Tiout = setTimeout(function() {
			vm.temp_number.forEach(function(item, index) {
				get_data('api/GoodCart/editGoodCart', {
					token: $api.getStorage('token'),
					good_cart_id: item.id,
					good_num: item.good_num,
					good_sku: item.good_sku
				}, function(ret) {
					if (ret.status) {
						vm.temp_number.splice(index, 1)
					}
				}, false)
			})
		}, 100)
	}

	function showAttr(vo) {
		// $api.setStorage('goodsinfo', vo);
		api.openFrame({
			name: 'sel_sku',
			url: 'sel_sku.html',
			pageParam: {
				goodsinfo: vo
			},
			bounces: false,
			rect: {
				x: 0,
				y: 0,
				w: 'auto',
				h: 'auto'
			},
			vScrollBarEnabled: false,
			bgColor: 'rgba(0,0,0,0)'
		})
	}

	$(function() {

		FastClick.attach(document.body);

	});
</script>

</html>
